<template>
    <div class="zhsl">
        <div class="title"></div>
        <div class="cnt">
            <div class="scroll-table">
                <ul class="tHead">
                    <li v-for="item in columns" :key="item.key + Math.random()" :style="{width: item.width}">
                        <div>{{item.title}}</div>
                    </li>
                </ul>
                <p class="nodata" v-if="tableList.length==0">暂无数据</p>
                <vue-seamless-scroll v-else :data="tableList" class="seamless-warp" :class-option="option">
                    <ul class="tBody">
                        <li v-for="(item,index) in tableList" :key="index" class="clearFloat" @click="rowClick(item)">
                            <section>
                                <div v-for="it in columns" :key="it.key + Math.random()" :style="{width: it.width}">
                                      <span :title="item[it.key]">{{item[it.key]}}</span>
                                </div>
                            </section>
                        </li>
                    </ul>
                </vue-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "zhsl",
    props: {
        scrollOption: {
            type: Object,
            default: () => ({})
        },
        tableData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        tableList(){
            let data = this.tableData;
            let max = 0;
            for(let i in data){
                if(data[i] && data[i].length > max){
                    max = data[i].length;
                }
            }
            let list = new Array(max).fill({}).map((item, index) => {
                let obj = {};
                for(let i in data){
                  obj[i] = data[i][index]
                }
                return obj
            })
            return list
        },
        option(){
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                openTouch: false, //移动端touch滑动
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
                ...this.scrollOption
            }
        }
    },
    data() {
        return {
            columns: [
                {title: '目录名称', key: 'catelog',width: "38%", tooltip: true},
                {title: '条线', key: 'line', width: "10%"},
                {title: '大厅网办收件数', key: 'hallNum', width: "13%"},
                {title: '窗口端收件数', key: 'windowNum', width: "13%", tooltip: true},
                {title: '移动端收件数', key: 'mobileNum', width: "13%", tooltip: true},
                {title: '异地网办收件数', key: 'allopatricNum', width: "13%", tooltip: true},
            ],
        }
    },
    created() {

    },
    methods: {
        rowClick(row){
            this.$emit("rowClick", row);
        }
    }
}
</script>

<style lang="scss" scoped>
.zhsl{
    position: relative;
    margin-top: -26px;
    padding-left: 32px;
    //flex: 1;
    overflow: hidden;
}
.title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/mid1.png") no-repeat;
    background-size: 100% 100%;
}
.cnt{
    margin-top: 14px;
    padding-left: 11px;
    height: calc(100% - 62px);
}
.scroll-table{
    width: 855px;
    height: 100%;
    .tHead{
        display: flex;
        align-items: center;
        height: 44px;
        background: rgba(0, 155, 252, 0.2);
        padding: 0 24px;
        li{
            color: rgba(26, 215, 255, 1);
            font-family: "Source Han Sans CN";
            text-align: center;
            font-weight: 350;
            font-size: 14px;
            line-height: 21px;
        }
    }
    .seamless-warp{
        height: 176px;
        overflow: hidden;
    }
    .tBody{
        li{
            height: 44px;
            cursor: pointer;
            text-align: center;
            padding: 0 24px;
            &:nth-child(even){
                background: rgba(208, 222, 238, 0.05);
            }
            section{
                display: flex;
                font-size: 14px;
                color: #fff;
                width: 100%;
                height: 44px;
                line-height: 44px;
                >div{
                    height: 100%;
                    padding: 0 4px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    text-align: center;
                }
            }
        }
    }
}

.nodata{
    height: calc(100% - 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 16px;
}
</style>